<template>
  <base-modal :title="$t('product.detail.downloadCodeDialog.title')" :show.sync="visible" width="400px" class="base-import-modal" >
    <div class="preview-code">
      <div class="code">
        <div ref="qrcode" v-show="codeData.codeType==='qrcode'"></div>
        <div class="miniProgram" v-show="codeData.codeType==='miniProgramCode'">
          <img :src="codeData.miniProgramCodeImg" alt="">
        </div>
        <p v-if="params.addQrcodeId">{{qrcodeId}}</p>
        <p v-if="params.addTenant">{{codeData.nickName}}</p>
      </div>
      <dl>
        <dt>{{$t('product.detail.downloadCodeDialog.text.text1')}}</dt>
        <dd>
          <el-checkbox v-model="params.addQrcodeId">{{$t('product.type.qrcodeId')}}</el-checkbox>
        </dd>
        <dd>
          <el-checkbox v-model="params.addTenant">{{$t('product.detail.downloadCodeDialog.text.text2')}}</el-checkbox>
        </dd>
      </dl>
    </div>

    <div class="dialog-footer" style="margin-top: 15px;">
      <el-button @click="visible = false">{{ $t('common.base.cancel') }}</el-button>
      <el-button type="primary" @click="download" :disabled="pending">{{ $t('common.base.download') }}</el-button>
    </div>
  </base-modal>
</template>

<script>

import QRCode from 'qrcodejs2';
import {
  downloadQrcode,
} from '@src/api/ProductApi';

export default {
  name: 'download-code',
  props: {
    codeData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      visible: false,
      pending: false,
      params: {
        addQrcodeId: false,
        addTenant: false,
      }
    }
  },
  computed: {
    qrcodeId() {
      return this.codeData.qrcodeId;
    }
  },
  methods: {
    open() {
      this.visible = true;
      this.createCode();

    },
    download() {
      if(this.codeData.codeType == 'qrcode'){
        // 下载普通二维码
        const {addQrcodeId, addTenant} = this.params;
        location.href = `${'/product/downloadOneQrcode' + '?addQrcodeId='}${addQrcodeId}&addTenant=${addTenant}&qrcodeId=${this.qrcodeId}`;
      }else if(this.codeData.codeType == 'miniProgramCode'){
        // 下载微信二维码
        console.log('miniProgramCode')
        this.downloadAppletQrCode()
      }
    },
    createCode() {
      if(!this.qrcodeId) return;
      let url = `${window.location.origin}/qrcode/${this.codeData.domain}?qrcodeId=${this.qrcodeId}`;
      this.$refs.qrcode.innerHTML = '';
      this.$nextTick(() => {
        let qrcode = new QRCode(this.$refs.qrcode, {
          text: url,
          width: 120,
          height: 120,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        });
      })
    },
    reset() {
      this.visible = false;
      this.params = {
        addQrcodeId: false,
        addTenant: false,
      }
    },
    downloadAppletQrCode(){
      const params = {
        addQrcodeId:this.params.addQrcodeId,
        addTenant:this.params.addTenant,
        appletCodeId:this.codeData.appletCodeId,
        qrcodeId:this.codeData.qrcodeId
      }
      // const res = await downloadAppletQrCode(params)
      location.href = `${'/product/downloadAppletQrCode' + '?addQrcodeId='}${params.addQrcodeId}&addTenant=${params.addTenant}&qrcodeId=${params.qrcodeId}&appletCodeId=${params.appletCodeId}`;

    }
  },
}
</script>

<style lang="scss">

  .preview-code {
    display: flex;

    .code {
      p {
        text-align: center;
        line-height: 24px;
        margin: 0;
      }
      p, img {
        width: 120px;
      }
    }
    .miniProgram{
      img{
        width: 120px;
        height: 120px;
      }
    }

    dl {
      padding-left: 20px;
      dt {
        line-height: 28px;
        margin-bottom: 8px;
      }
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }

</style>